<template>
	<div>
		<!-- 头部 -->
		<div class="header">
			<el-row style="padding: 5px 0 0 0;">
				<el-col :span="4">
					账号名称:
					<el-input v-model="aName" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="4">
					账号id:
					<el-input v-model="aId" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="2">
					<el-button size="mini" @click="selectLike"
						style="width: 90px;height: 40px;background-color: #00A0FF;color: #fff;">
						查询结果</el-button>
				</el-col>
				<el-col :span="2">
					<el-tag v-if="id!=null" closable :disable-transitions="true" :key="name" @close="handleClose()">
						{{name}}
					</el-tag>
				</el-col>
			</el-row>
		</div>
		<el-row v-if="selectedRows.length > 0">
			<el-col :span="6">
				是否启用:
				<el-switch v-model="whether" :active-value="0" :inactive-value="1" @change="handleSwitch()" ></el-switch>
			</el-col>
		</el-row>
		<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{ textAlign: 'center' }"
			:data="advertisersList.records" stripe style="width: 100% width: 80%;margin: auto" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column property="id" label="编号">
			</el-table-column>
			<el-table-column property="advertisingId" label="账号id">
			</el-table-column>
			<el-table-column property="name" label="账号名">
			</el-table-column>
			<el-table-column label="是否启用">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.whether" :active-value="0" :inactive-value="1" @change="handleSwitchChange(scope.row, $event)" ></el-switch>
				</template>
			</el-table-column>
			<el-table-column property="balance" label="余额" sortable>
			</el-table-column>
			<el-table-column label="投手工号">
				<template slot-scope="scope">
					<template v-for="item in umsPitcher">
						<span :key="item.id" v-if="scope.row.pitcherId == item.id">
							{{item.number}}
						</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column property="status" label="账号状态">
				<template slot-scope="scope">
					<el-button type="success" v-if="scope.row.status==4">审核通过</el-button>
					<el-button type="danger" v-if="scope.row.status==8">暂停投放</el-button>
					<el-button type="warning" v-if="scope.row.status==10">待提交资质</el-button>
					<el-button type="warning" v-if="scope.row.status==14">待对公验证</el-button>
					<el-button type="warning" v-if="scope.row.status==5">审核不通过</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<el-row slot-scope="scope">
					<el-col span="6"><el-button type="text" size="mini"
							@click="dialogVisible=true,title='编辑资源',update(scope.row.id)">编辑</el-button></el-col>
					<el-col span="18"><el-button type="text" size="mini"
							@click="deletes(scope.row.id)">删除</el-button></el-col>
				</el-row>
			</el-table-column>
		</el-table>
		<div>
			<el-row style="margin: 20px 0;">
				<el-col :span="11">
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage4" :page-sizes="[10, 20, 50, 100]" :page-size="10"
							layout="total, sizes, prev, pager, next, jumper" :total="advertisersList.total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import '@/assets/css/index.css'
	import qs from 'qs'
	export default {
		name: "qua",
		data() {
			return {
				advertisersList: [],
				resourceCategory: [],
				aName: '',
				aId: '',
				role: '',
				categoryIds: '',
				dialogVisible: false,
				description: '',
				title: '',
				resource: [],
				id: '',
				roleDescriptions: {

				},
				umsPitcher: [],
				name:'',
				selectedRows:[],
				whether:1
			}
		},
		created() {
			this.id = this.$route.params.accountId
			this.name =this.$route.params.name
			this.list();
		},
		methods: {
			handleSelectionChange(val) {
				this.selectedRows = val;
				console.log(this.selectedRows)
			},
			list(){
				let than = this
				this.$axios.post('umsPitcher/list').then((res) => {
					than.umsPitcher = res.data;
				});
				this.$axios.post('umsAdvertisingUser/list', qs.stringify({
					size: 10,
					current: 1,
					advCompanyId: than.id
				})).then((res) => {
					than.advertisersList = res.data;
					console.log(than.advertisersList)
				})
			},
			handleClose() {
				this.size=this.advertisersList.size
				this.current=this.advertisersList.current
				this.id=null;
				this.list();
			},
			handleSizeChange(val) {
				let that = this
				this.$axios.post('umsAdvertisingUser/list', qs.stringify({
					size: val,
					current: 1,
					name: that.aName,
					id: that.aId,
					advCompanyId: that.id
				})).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
			handleSwitchChange(row, newValue){
				console.log('Row data:', row);  
				console.log('Switch value:', newValue);  
				this.$axios.post('umsAdvertisingUser/update',qs.stringify({whether:newValue,id:row.id})).then((res)=>{
					if(res.data){
						this.$message({
							message: '修改成功',
							type: 'success'
						});
					}
				})
			},
			handleSwitch(){
				let than=this
				this.selectedRows.forEach((data)=>{
					this.$axios.post('umsAdvertisingUser/update',qs.stringify({whether:than.whether,id:data.id})).then((res)=>{
						console.log(res.data)
					})
				})
				this.list()
				this.$message({
					message: '修改成功',
					type: 'success'
				});
			},
			handleCurrentChange(val) {
				let that = this;
				this.$axios.post('umsAdvertisingUser/list', qs.stringify({
					size: that.advertisersList.size,
					current: val,
					name: that.aName,
					id: that.aId,
					advCompanyId: that.id
				})).then((res) => {
					that.advertisersList = res.data;
				})
			},
			goToExternalUrl() {

			},
			selectLike() {
				let that = this
				this.$axios.post('umsAdvertisingUser/list', qs.stringify({
					size: 10,
					current: 1,
					name: that.aName,
					id: that.aId,
					advCompanyId: that.id
				})).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
		}
	}
</script>

<style>
	.header {
		width: auto;
		height: 50px;
		border: 1px solid #ddd;
		margin: 15px auto;
		border-radius: 3px 3px;
		position: relative;
	}
</style>